<template>
  <div class="purchase-order table-theme">
    <head-title title="财务--预存管理"></head-title>
    <el-card>
      <div class="data-filtering-view">
        <div class="data-filtering-left"></div>
        <div class="data-filtering-right">
          <search-view
            :option="searchOption"
            @value="goSearch"
            @clear="refreshPage"
          ></search-view>
          <refresh-button @refresh="refreshPage"></refresh-button>
        </div>
      </div>
      <el-table :data="list" stripe style="margin-top: 20px">
        <el-table-column
          label="序号"
          align="center"
          prop="store_money_id"
          width="80"
        ></el-table-column>
        <el-table-column
          label="店铺ID"
          align="center"
          prop="store_id"
          width="80"
        ></el-table-column>
        <el-table-column
          label="店铺名称"
          align="center"
          min-width="150"
          prop="store_name"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="开通时间"
          align="center"
          width="165"
          prop="add_time"
        ></el-table-column>
        <el-table-column
          label="消费订单数"
          align="center"
          prop="order_count"
          width="100"
        ></el-table-column>
        <el-table-column label="总预存金额" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.history_pre_stored_money }}元
          </template>
        </el-table-column>
        <el-table-column label="预存余额" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.pre_stored_money }}元
          </template>
        </el-table-column>
        <el-table-column label="扣款金额" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.deduction_money }}元
          </template>
        </el-table-column>
        <el-table-column label="退款金额" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.refund_money }}元
          </template>
        </el-table-column>
        <el-table-column label="消费金额" align="center" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.consumption_money }}元
          </template>
        </el-table-column>
        <el-table-column label="预存审核中金额" align="center" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.examine_pre_stored_money }}元
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="settlementF(scope.row)">预存款</el-button>
            <el-button type="primary" size="mini" @click="deductionF(scope.row,1)">扣款</el-button>
            <el-button type="primary" size="mini" @click="deductionF(scope.row,2)">退款</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="init"
          :current-page.sync="page"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog :visible.sync="deductionDialog" :title="deductionForm.type==1?'扣款':'退款'" append-to-body :close-on-press-escape="false" width="680px">
      <el-form :model="deductionForm" :rules="deductionRules" ref="deductionForm" label-width="100px">
        <div class="storage-info">
          <p><span>最大{{deductionForm.type==1?'扣款':'退款'}}扣款金额为：</span>{{ rowInfo.pre_stored_money }}</p>
        </div>
        <el-form-item :label="deductionForm.type==1?'扣款类型:':'退款类型:'" prop="type">
          <el-select v-model="deductionForm.trade_type" clearable filterable>
            <template v-if="deductionForm.type == 1">
              <el-option label="售后" :value="1"></el-option>
              <el-option label="差价" :value="2"></el-option>
              <el-option label="商家违规" :value="3"></el-option>
              <el-option label="订单付款" :value="4"></el-option>
              <el-option label="其他" :value="5"></el-option>
            </template>
            <template v-if="deductionForm.type == 2">
              <el-option label="商家结清" :value="1"></el-option>
              <el-option label="商家申请提现" :value="2"></el-option>
              <el-option label="其他" :value="3"></el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item :label="deductionForm.type==1?'扣款金额:':'退款金额:'" prop="money">
          <el-input placeholder="请输入金额" v-model="deductionForm.money" @input="negative(1)"></el-input>
        </el-form-item>
        <el-form-item label="关联订单号:" prop="order_sn" v-if="deductionForm.trade_type && deductionForm.trade_type!=3 && deductionForm.trade_type!=5 && deductionForm.type == 1">
          <el-input placeholder="请输入订单编号" v-model="deductionForm.order_sn"></el-input>
        </el-form-item>
        <el-form-item :label="deductionForm.type==1?'扣款凭证:':'退款凭证:'" prop="voucher_img">
          <div class="upload-box" style="padding-left: 0;">
            <div class="goods-img-upload">
              <div class="goods-img-upload-btns">
                <el-upload ref="upload" action="fakeaction"
                  :show-file-list="false" :http-request="function (res) { return upload(res,1); }" multiple
                  accept="image/*"><el-button type="primary" size="small">上传图片</el-button>
                </el-upload>
              </div>
              <div class="goods-img-upload-imgs">
                <el-image v-if="!deductionForm.voucher_img.length">
                  <div slot="error"></div>
                </el-image>
                <div v-for="(data, index) in deductionForm.voucher_img" :key="index" class="vice_big_box" v-else>
                  <i class="el-icon-error" @click="delVoucher(index,1)"></i>
                  <el-image :preview-src-list="deductionForm.voucher_img" :src="data" fit="contain"></el-image>
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item :label="deductionForm.type==1?'扣款说明:':'退款说明:'" prop="brief">
          <el-input type="textarea" :rows="6" placeholder="请输入说明" v-model="deductionForm.brief"></el-input>
        </el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="deductionDialog = false">取 消</el-button>
				<el-button type="primary" @click="submit('deductionForm')">确 定</el-button>
			</span>
    </el-dialog>
    <el-dialog :visible.sync="settlementDialog" title="新增预存" append-to-body :close-on-press-escape="false" width="680px">
      <el-form :model="settlementForm" :rules="settlementRules" ref="settlementForm" label-width="100px">
        <el-form-item label="预存金额:" prop="money">
          <el-input placeholder="请输入预存金额" v-model="settlementForm.money" @input="negative(2)"></el-input>
        </el-form-item>
        <el-form-item label="预存凭证:" prop="voucher_img">
          <div class="upload-box" style="padding-left: 0;">
            <div class="goods-img-upload">
              <div class="goods-img-upload-btns">
                <el-upload ref="upload" action="fakeaction"
                  :show-file-list="false" :http-request="function (res) { return upload(res,2); }" multiple
                  accept="image/*"><el-button type="primary" size="small">上传图片</el-button>
                </el-upload>
              </div>
              <div class="goods-img-upload-imgs">
                <el-image v-if="!settlementForm.voucher_img.length">
                  <div slot="error"></div>
                </el-image>
                <div v-for="(data, index) in settlementForm.voucher_img" :key="index" class="vice_big_box" v-else>
                  <i class="el-icon-error" @click="delVoucher(index,2)"></i>
                  <el-image :preview-src-list="settlementForm.voucher_img" :src="data" fit="contain"></el-image>
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="预存说明:" prop="brief">
          <el-input type="textarea" :rows="6" placeholder="请输入预存说明" v-model="settlementForm.brief"></el-input>
        </el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="settlementDialog = false">取 消</el-button>
				<el-button type="primary" @click="settleSubmit('settlementForm')">确 定</el-button>
			</span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchOption: [
        {
          value: 0,
          label: "店铺编号",
          key: 'store_id',
        },
        {
          value: 1,
          label: "店铺名称",
          key: 'store_name',
        },
      ],
      searchType: "",
      searchContent: "",
      page: 1,
      total: 0,
      list: [],
      rowInfo: '',
      deductionDialog: false,
      deductionForm: {
        store_id: '',
        type: 1,
        trade_type: '',
        money: '',
        order_sn: '',
        voucher_img: [],
        brief: ''
      },
      deductionRules: {
        type: [{ required: true,message: '请选择扣款类型',trigger: 'change' }],
        money: [{ required: true,message: '请输入扣款金额',trigger: 'blur' }],
        order_sn: [{ required: true,message: '请输入订单编号',trigger: 'blur' }],
        voucher_img: [{ type: 'array', required: true,message: '请上传扣款凭证',trigger: 'change' }],
        brief: [{ required: true,message: '请输入扣款说明',trigger: 'blur' }],
      },
      settlementDialog: false,
      settlementForm: {
        store_id: '',
        brief: '',
        money: '',
        voucher_img: []
      },
      settlementRules: {
        voucher_img: [{ type: 'array', required: true,message: '请上传预存凭证',trigger: 'change' }],
        money: [{ required: true,message: '请输入预存金额',trigger: 'blur' }],
        brief: [{ required: true,message: '请输入预存说明',trigger: 'blur' }],
      },
    };
  },
  watch: {
    deductionDialog(n,o){
      if(!n){
        this.deductionForm = this.$options.data().deductionForm
      }
    }
  },
  mounted(){
    this.init()
  },
  methods: {
    negative(type){
      let reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
      if(type==1 && this.deductionForm.money && !reg.test(this.deductionForm.money)){
        this.deductionForm.money = ''
        this.$layer.msg('不能输入负数，请重新输入')
      }else if(type==2 && this.settlementForm.money && !reg.test(this.settlementForm.money)){
        this.settlementForm.money = ''
        this.$layer.msg('不能输入负数，请重新输入')
      }
    },
    init() {
      let data = {
        page: this.page - 1,
      }
      if(this.searchType!==''){
        data[this.searchOption[this.searchType].key] = this.searchContent
      }
      this.$http(this.$ApiList.PreStoredList,data).then(res => {
        if(res.code==200){
          this.list = res.datas.data
          this.total = res.datas.count
        }
      })
    },
    goSearch(searchType, searchContent) {
      this.searchType = searchType;
      this.searchContent = searchContent;
      this.page = 1;
      this.init();
    },
    // 刷新
    refreshPage() {
      this.searchType = 0;
      this.searchContent = "";
      this.page = 1;
      this.init();
    },
    deductionF(row,type){
      this.rowInfo = row
      this.deductionForm.type = type
      this.deductionForm.store_id = row.store_id
      this.deductionDialog = true
    },
    upload(params,type) {
      if (type == 1 && this.deductionForm.voucher_img.length >= 3) {
        return this.$layer.msg(`最多上传3张`);
      }
      if (type == 2 && this.settlementForm.voucher_img.length >= 3) {
        return this.$layer.msg(`最多上传3张`);
      }
      const file = params.file,
        isJPGPNG = file.type === 'image/jpeg' || file.type === 'image/png',
        isLt3MB = file.size / 1024 <= 3024;
      if (!isJPGPNG) {
        this.$layer.msg('只能上传图片格式png、jpg!');
        return;
      }
      if (!isLt3MB) {
        this.$layer.msg('图片不能大于3M');
        return;
      }
      let img = new FormData();
      img.append('file[]', file);
      this.$http(this.$ApiList.publicUpload, img).then(res => {
        if(type==1){
          if (this.deductionForm.voucher_img.length >= 3) return
          this.deductionForm.voucher_img.push(res.datas[0])
        }
        if (type == 2) {
          if (this.settlementForm.voucher_img.length >= 3) return
          this.settlementForm.voucher_img.push(res.datas[0])
        }
      });
    },
    delVoucher(index,type){
      if(type==1){
        this.deductionForm.voucher_img.splice(index,1)
      }
      if(type==2){
        this.settlementForm.voucher_img.splice(index,1)
      }
    },
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let data = {}
          for(let i in this.deductionForm){
            if(i!=='voucher_img'){
              data[i] = this.deductionForm[i]
            }else{
              data[i] = this.deductionForm[i].join(',')
            }
          }
          this.$http(this.$ApiList.AddDeductionStore,data).then(res => {
            this.$layer.msg(this.deductionForm.type==1?'扣款成功':'退款成功');
            this.deductionDialog = false
            this.init()
          })
        } else {
          this.$layer.msg('请填写完整信息后提交');
        }
      });
    },
    settlementF(row){
      this.settlementForm.store_id = row.store_id
      this.settlementDialog = true
    },
    settleSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let data = {}
          for(let i in this.settlementForm){
            if(i!=='voucher_img'){
              data[i] = this.settlementForm[i]
            }else{
              data[i] = this.settlementForm[i].join(',')
            }
          }
          this.$http(this.$ApiList.AddPreStored,data).then(res => {
            this.$layer.msg('提交结算成功');
            this.settlementDialog = false
            this.init()
          })
        } else {
          this.$layer.msg('请填写完整信息后提交');
        }
      });
    },
  },
};
</script>

<style lang="scss">
.vl-notify{
	z-index: 10000;
}
</style>
<style lang="scss" scoped>
.order_list_head {
  display: flex;
}
.type-view {
  display: flex;
  flex: 1;
  min-width: 0;
}
.type-view .client-item {
  margin-right: 40px;
  line-height: 40px;
  color: rgba(153, 153, 153, 1);
  cursor: pointer;
}
.client-item-active {
  color: #333333 !important;
  border-bottom: 4px solid #34a1e0;
}
.data-filtering-view {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .data-filtering-left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    .select-view {
      margin-left: 10px;
    }
  }
  .data-filtering-right {
    display: flex;
    align-items: center;
  }
}
.storage-info{
  line-height: 30px;
  margin-bottom: 15px;
  font-size: 12px;
  p{
    color: #333;
    font-weight: bold;
    span{
      font-weight: normal;
      color: #888;
    }
  }
}
.upload-box {
	// padding-left: 40px;

	.goods-img-upload {
		display: flex;

		.goods-img-upload-imgs {
			flex: 1;
			align-items: flex-start;

			.el-image {
				width: 140px;
				height: 140px;
				border: solid 1px #e5e5e5;
				margin-left: 25px;
				vertical-align: top;
			}
		}

		.goods-img-upload-imgs-info {
			width: 100%;
			max-width: 660px;
			border: solid 1px #e5e5e5;
			margin-left: 25px;
			min-height: 390px;

			.goods-img-upload-imgs-info-box {
				position: relative;

				.el-icon-error {
					position: absolute;
					font-size: 20px;
					color: #ef3030;
					right: 5px;
					top: 5px;
					z-index: 1;
					background-color: #fff;
					border-radius: 50%;
					cursor: pointer;
				}
			}

			.el-image {
				width: 100%;
				vertical-align: top;
			}
		}

		.vice_big_box {
			position: relative;
			display: inline-block;
			vertical-align: top;
			margin-bottom: 20px;

			.el-icon-error {
				position: absolute;
				font-size: 20px;
				color: #ef3030;
				right: 5px;
				top: 5px;
				z-index: 1;
				background-color: #fff;
				border-radius: 50%;
				cursor: pointer;
			}
		}
	}
}
</style>